<template>
	<div class="wrapper" v-if="list">
		<!--左右按钮-->
		<header>
			<div>
				<a @click="back">
					<i class="left"></i>
				</a>
				<a @click="back">
					<i class="right"></i>
				</a>
			</div>
		</header>
		<div class="carousel" ref="carousel">
			<div class="banner" ref="banner" v-if="list.src"><!--v-for轮播-->
				<div v-for="(item,i) in list.src" :key="i" class="bannerList">
					<img :src="item" alt="">
				</div>
			</div>
		</div>
		<div class="date" v-if="list.dates || list.order">

		</div>
		<div class="content">
			<div class="text">
				<p v-text="list.name"></p>
				<div class="brief">
					<p v-text="list.brief"></p>
					<span v-text="list.con"></span>
				</div>
				<div class="priceBox">
					<span v-text="list.price" class="price"></span>
					<span v-if="list.originally" v-text="list.originally" class="originally"></span>
				</div>
			</div>
			<div class="avatar" ref="avatar" v-if="list.types">
				<div class="avatarList" v-for="(item,i) in avatars(list.types,list.avatar)" :key="i">
					<img :src="item" alt="">
					<p v-text="list.parameter[i].top" class="top"></p>
					<p v-text="list.parameter[i].bottom"></p>
				</div>
			</div>
			<div v-if="list.exchange" class="exchange">
				<img :src="list.exchange" alt="">
			</div>
			<div v-if="list.answer" class="answer">
				<img :src="list.answer" alt="">
			</div>
			<ul class="detailsBox" v-if="list.box">
				<li @click="alertDetails(1)">
					<p v-text="list.config[list.box.genre].color[list.box.color].brief"></p>
					<span v-text="quantity"></span>
				</li>
				<li v-if="list.box.site">
					<p v-text="list.box.site"></p>
					<span v-if="!list.box.quantity">
						该地区暂时缺货
					</span>
				</li>
				<li v-else="list.box.site && list.box.initialSite" @click="setSite">
					<p v-text="list.box.initialSite"></p>
					<span v-if="!list.box.quantity">
						该地区暂时缺货
					</span>
					<span v-else="!list.box.quantity">
						有现货
					</span>
				</li>
				<li v-if="list.box.fsc">
					<span v-for="(item,i) in list.box.fsc" :key="i" v-text="item"></span>
				</li>
			</ul>
		</div>
		<div class="img" v-if="list.img.length"><!--图片-->
			<img :src="item" alt="" v-for="(item,i) in list.img" :key="i">
		</div>
		<!--加入购物车-->
		<footer class="footer">
			<div class="addProduct">
				<router-link to="/">
					<i class="home"></i>
					<span v-text="`首页`"></span>
				</router-link>
				<router-link to="/cart">
					<i class="cart"></i>
					<span v-text="`购物车`"></span>
					<em v-if="cartLength.length" v-text="cartLength.length"></em>
				</router-link>
				<!--点击弹出加入框-->
				<div class="add" @click="alertDetails(1)">
					<div v-text="`加入购物车`"></div>
				</div>
			</div>
		</footer>
		<!--弹出遮罩-->
		<div class="alert" ref="alert">
			<template>
				<div class="alertContent" ref="alertContent">
					<div class="Box">
						<div class="close" ref="close" @click="close"><!--关闭-->
							<i></i>
						</div>
						<!--弹出框内容-->
						<div class="pro-info">
							<div class="product-img">
								<img :src="list.alertImg[list.config[list.box.genre].color[list.box.color].src]" alt="" ref="img">
								<!--产品图片-->
							</div>
							<div class="product-desc">
								<div class="product-price"><!--产品价格-->
									<!--现在价格-->
									<span v-text="list.config[list.box.genre].color[list.box.color].price?
								list.config[list.box.genre].color[list.box.color].price:list.config[list.box.genre].price
								" class="price" ref="price"></span>
									<!--原价-->
									<span v-if="list.config[list.box.genre].color[list.box.color].originally"
									      v-text="list.config[list.box.genre].color[list.box.color].originally"
									      class="originally">
									</span>
									<!--这个颜色或者类型的原价-->
									<span class="originally" v-else-if="list.config[list.box.genre].originally"
									      v-text="list.config[list.box.genre].originally"></span>
								</div>
								<div class="productName" ref="name"
								     v-text="list.config[list.box.genre].color[list.box.color].brief">
								</div>
							</div>
						</div>
						<div class="productDetailBox">
							<div v-if="list.config.length" v-text="`版本`" class="versionsTitle"></div>
							<!--选择产品配置-->
							<ul class="versions" v-if="list.config.length">
								<li v-for="(item,i) in list.config" :key="i" :class="list.box.genre ===i ? 'activate':''"
								    @click="getConfig(i)">  <!--点击改变激活状态-->
									<span v-text="item.versions"></span><!--配置信息-->
									<span v-text="item.price" class="versionsPrice"></span><!--价格-->
								</li>
							</ul>
							<!--如果有多个颜色可选-->
							<div v-if="list.config[list.box.genre].color.length" v-text="`颜色`" class="colorTitle"></div>
							<!--点击切换颜色-->
							<div class="colorBox">
								<div class="productColor" @click="getColor(i)"
								     v-for="(item,i) in list.config[list.box.genre].color" :key="i"
								     :class="list.box.color===i?'productColorActivate':''">
									<span v-text="item.name"></span>
								</div>
							</div>
						</div>
					</div>
					<!--加入购物车-->
					<div class="addCart" @click="addCart">
						<div class="addButton" v-text="`加入购物车`"></div>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>
<script type="text/ecmascript-6">
    import {createNamespacedHelpers} from "vuex";//映射仓库
    import imagesLoaded from "imagesloaded";
    import ElementUi from "element-ui";
    const {mapActions, mapState,mapGetters} = createNamespacedHelpers("detail");//mapState放在计算属性//const声明常量
    export default {
        name: "detail",
	    //存储页面数据
        data(){
            return {
                banner: {
                    isInit: false,          //是否初始化
                    loop: true,                     // 是否无缝
                    autoPlay: true,              // 是否开启自动播放
                    interval: 5000,               // 自动播放的间隔时间
                    curIndex: 1,                   // 记录当前banner第几项处于激活
                    timer: null,                    // 保存自动轮播的计时器对象
                    speed: 600                    // 切换速度
                },
                alert: 0,//标识alert弹出的内容
	            cartLength:this.$store.state.cart.cart,
	            /*----------标识当前加载了那些详情商品----------*/
	            product:[],//存储仓库已经有的数据
            }
        },
	    //根据数据做出计算属性
        computed: {
            ...mapState([ "quantity"]),//根据list创建数据
            ...mapGetters(["list"]),
        },
	    //存储方法
        methods: {
            ...mapActions(["init"]),//仓库映射actions
	        //根据传过来的商品type来动态渲染avatars的路径
            avatars(type, num){
                let result = [];//数组存的是图片资源
                for(let i = 1; i <= num; i++){
                    result.push(require(`../../static/public/images/detail/tubiao/${ type }/${ i }.png`));
                }
                return result;
            },
            //轮播
            _bannerScroll(){
                //判断轮播是否已经有了
	            let imgload = imagesLoaded(this.$refs.carousel,()=>{
                    let banner = this.$refs.banner;
                    let length = this.$refs.banner.children.length;
                    this.$refs.banner.style.width = this.banner.loop?((length + 2) * 100) + "%":(length * 100) + "%";//设置宽度
                    //添加轮播
                    this.bannerScroll = new this.$BScroll(this.$refs.carousel, {//挂载和配置
                        scrollY: false,
                        scrollX: true,// 开启横向滚动
                        momentum: false,//惯性滑动
                        snap: {
                            speed: this.banner.speed,  //切换速度
                            threshold: 0.1,  //滑动多少切换
                            loop: this.banner.loop  //是否无缝滚动
                        }
                    });
                    if(this.banner.autoPlay) this._play();//开启自动轮播
                    this.bannerScroll.on("scrollEnd", () => {//添加滚动结束事件
                        this.banner.curIndex = this.bannerScroll.getCurrentPage().pageX + 1;//获取轮播当前页默认从0开始
                        if(this.banner.autoPlay) this._play();//如果是自动轮播的话滚动结束后调用下一次轮播
                    });
                    if(this.list.src.length > 0 && !this.bannerScroll && !this.banner.isInit){
                        this.banner.isInit = true;
                    }
	            })
            },
            //自动轮播
            _play(){
                clearTimeout(this.banner.timer);
                this.banner.timer = setTimeout(() => this.bannerScroll.next(), this.banner.interval) //next跳到下一页
            },
            //点击显示遮罩
            alertDetails(id){
                if(id === this.alert){}
                else this.alert = id;
                this.$refs.alert.style.display = "block";
                setTimeout(() => {
                    this.$refs.alertContent.style.height = '78%';
                    document.querySelector(".addCart").style.opacity = "1";
                }, 200);
            },
            //点击关闭遮罩
            close(){
                this.$refs.alertContent.style.height = '0%';
                document.querySelector(".addCart").style.opacity = "0";
                setTimeout(() => this.$refs.alert.style.display = "none", 500);
            },
            //点击添加购物车
            addCart(){
                let name = this.$refs.name.innerText;
                let price = this.$refs.price.innerText;
                let img = this.$refs.img.src;
                let box = {};//保存添加的商品的信息
                box.name = name;
                box.price = parseInt(price);
                box.img = img;
                box.num = 1;
                box.user = this.getCookie('userinfo');//调用函数查询用户名
                box.pid = parseInt(this.$route.query.index);//商品分类id
	            if(box.user){this.$store.dispatch("cart/addProduct",box);
                this.open();//调用函数弹出加入成功
	            }else{
	                this.$router.push({path:"/login"});}
            },
            open() {
                this.$message({
                    message: '成功加入购物车',
                    type: 'success',
                    customClass: "message",
	                iconClass:"el-icon-circle-check",
	                center: true,
                    duration:2000
                });
            },
            //选择颜色
            getColor(i){
                this.list.box.color = i;
            },
	        //选择配置
            getConfig(i){
                this.list.config[i].color[this.list.box.color]?this.list.box.genre = i:this.list.box.color = 0;
                this.list.box.genre = i
            },
            //根据键查找cookie的值
            getCookie(Name){
		        let search = Name + "="; //查询检索的值
		        let returnValue = "";//根据键返回的值
		        if (document.cookie.length > 0) {
		            let sd = document.cookie.indexOf(search);
		            if (sd != -1) {
		                sd += search.length;
		                let end = document.cookie.indexOf(";", sd);
		                if (end == -1){end = document.cookie.length;}
                        returnValue = unescape(document.cookie.substring(sd, end))
		            }
		        }
		        return returnValue;
		    },
            //返回上一页
            back(){
                let cookie = document.cookie.split(";");
                let from = "";
                for(let i = 0; i < cookie.length; i++){
                    let arr = cookie[i].split("=");
                    if(arr[0].replace(/^\s*|\s*$/g,"") === 'from'){
                        from = arr[1];
                    }
                }
                this.$router.push({
                    path: from
                });
            },
	        /*选择地址*/
	        setSite(){
				
	        }
        },
        created(){
            this.$store.dispatch('detail/getProduct', parseInt(this.$route.query.index));
            this.getCookie("userinfo") ? this.$store.dispatch("cart/init",this.getCookie("userinfo")) :null;
        },
	    mounted(){
            this.$nextTick(() => {
                if(this.bannerScroll) {//如果滚动已经存在就更新
                    this.bannerScroll.refresh();
                }else{
                    this._bannerScroll();
                }
            });
	    },
	    updated(){
            this.$nextTick(() => {
                if(this.bannerScroll) {//如果滚动已经存在就更新
                    this.bannerScroll.refresh();
                }else{
                    this._bannerScroll();
                }
            });
	    }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
	$right = ""
	$left = ""
	$cart = ""
	$home = ""
	$close = ""
	$icon = ""
	.wrapper
		width 100%
		height 100%
		overflow-y: auto
		overflow-x hidden
		header
			height: 1rem
			background: transparent
			position: absolute
			top: 0
			left: 0
			right: 0
			z-index: 10
			div
				display flex
				height 100%
				justify-content space-between
				align-items center
				a
					display: block
					width: .6rem
					height: .6rem
					margin: 0 .2rem
					color: #ddd
					background: rgba(0, 0, 0, .6)
					border-radius: 50%
					i
						display: inline-block
						width: .6rem;
						height: .6rem;
						-webkit-transform: scale(.6);
						transform: scale(.6)
						background-color: transparent;
						background-repeat: no-repeat;
						background-position: 50%;
						background-size: cover
					i.left
						background-image url($left)
					i.right
						background-image url($right)
		.carousel
			width 100%
			.banner
				overflow hidden
				background #ccc
				display flex
				font-size 0
				.bannerList
					flex-grow 1
					font-size 0
					img
						width 100%
		.date
			width 100%
		.content > div, .content > ul
			padding .32rem .32rem 0
		.content
			.text
				width 100%
				line-height: .35rem
				.brief > p
					display inline
					color rgb(255, 74, 0)
				.brief > span
					color rgba(0, 0, 0, .54)
				.priceBox
					padding 0.2rem 0
					.price
						color #ff6700
						font-size: .48rem
						line-height .48rem
					.price:before
						content "\A5"
						font-size 0.40rem
					.originally
						text-decoration line-through
						font-size 0.24rem
						position relative
						padding-left .16rem
						margin-left .16rem
						font-weight lighter
						font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
					.originally:before
						content "\A5"
						font-size 0.24rem
						text-decoration none
						position: absolute;
						left 0
						top -15%
			.text > p
				font-size 0.4rem
				color #3c3c3c
				line-height .6rem
			.avatar
				padding 0
				display flex
				align-items center
				overflow-x auto
				margin-bottom .45rem
				.avatarList:nth-child(1)
					border-left 1px solid transparent
				.avatarList
					flex-shrink 0
					display flex
					align-items center
					flex-direction column
					min-width 1.68rem
					padding 0 .08rem
					border-left 1px solid #d9d9d9
					img
						width .4rem;
						height .4rem
					p
						margin 0.02rem 0
						font-size .2rem
					.top
						font-size .24rem
						color: #3c3c3c
			.exchange, .answer
				width 100%
				padding 0
				margin-bottom 0.1rem
				img
					width 100%
					font-size 0
			.detailsBox
				padding 0
				margin 0rem 0.32rem 0
				border: 1px solid #e5e5e5
				background-color #fafafa
				border-radius .16rem
				overflow hidden
				li
					width 100%
					padding: .24rem .32rem
					position relative
					p
						display inline-block
						color: #3c3c3c
					span
						color: #3c3c3c
				li:before
					height: 1px;
					content: "";
					width: 100%;
					border-top: 1px solid #e5e5e5;
					position: absolute;
					top: 100%;
					right: 0;
				li:after
					width .18rem
					height .18rem
					border-color hsla(0, 0%, 64%, .8)
					content ""
					position absolute
					right .32rem
					top 50%
					border-left 1px solid currentColor
					border-top 1px solid currentColor
					transform translate3d(0, -50%, 0) rotate(135deg)
					-webkit-transform translate3d(0, -50%, 0) rotate(135deg)
				li:nth-child(1)
					p:before
						content "已选"
						display inline-block
						color rgba(0, 0, 0, .54)
						margin-right .3rem
						min-width .5rem
				li:nth-child(1)
					span:before
						content "x"
						color: #3c3c3c
				li:nth-child(2)
					p:before
						content "送至"
						display inline-block
						color rgba(0, 0, 0, .54)
						margin-right .3rem
						min-width .5rem
				li:nth-child(2)
					span
						color #ff6700
						margin-left 0.1rem
				li:nth-child(3)
					span
						font-size .2rem
						color rgba(0, 0, 0, .54)
					span:before
						content ""
						display inline-block
						height: .2rem;
						width: .2rem
						background-image url($icon)
						background-size cover
						background-position center center
						margin 0 0.1rem
		.img
			width 100%
			font-size 0
			img
				width 100%
		.footer //添加购物车
			padding 0 .16rem .16rem
			background transparent
			position fixed
			bottom 0
			left 0
			right 0
			z-index 100
			.addProduct
				background-color hsla(0, 0%, 100%, .96) !important
				width 100%
				height 1.04rem
				border 1px solid #e5e5e5
				border-radius .16rem
				overflow hidden
				display flex
				align-items center
				box-shadow 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)
				a
					position relative
					text-decoration none
					width auto
					margin-left .5rem
					color rgba(0, 0, 0, .54)
					i
						display block
						width .4rem
						height .4rem
						margin 0 auto .04rem
						background-color transparent
						background-repeat no-repeat
						background-position 50%
						background-size cover
					.home
						background-image url($home)
					.cart
						background-image url($cart)
					em
						position: absolute
						min-width: .28rem
						line-height: .28rem
						height: .28rem
						box-sizing: border-box
						padding: 0 .05rem
						font-size: .18rem
						overflow: hidden
						text-align: center
						border-radius: .28rem
						background: #ed4d41
						color: #fff
						top: 0
						left: 50%
						-webkit-transform: translate3d(.1rem,-20%,0)
						transform: translate3d(.1rem,-20%,0)
						font-style: normal
				.add
					margin-right .32rem
					margin-left .4rem
					text-align right
					flex-grow 1
					div
						display inline-block
						width auto
						max-width 4rem
						overflow hidden
						padding 0 .48rem
						height .64rem
						line-height .64rem
						border-radius .32rem
						outline: 0
						background: #ff6700
						color: #fff
						text-align: center
						font-size: .28rem
		.alert
			position fixed
			top 0
			left 0
			bottom 0
			right 0
			background-color rgba(0, 0, 0, 0.6)
			z-index 99999
			display none
			.alertContent
				overflow-y auto
				padding 0 .32rem 0
				height 0%
				width 100%
				background #FFFFFF
				position absolute
				bottom 0
				border-top-right-radius 0.3rem
				border-top-left-radius 0.3rem
				transition all 0.5s
				.Box
					padding-bottom 1.27rem
					height 100%
					.close
						position: absolute
						top: .18rem
						right: .18rem
						width: .6rem
						height: .6rem
						z-index: 111
						i
							display inline-block
							width .32rem
							height .32rem
							margin .14rem 0 0 .14rem
							background-image url($close)
							background-size cover
					.pro-info /*弹出框价格信息和图片*/
						padding: .64rem 0 .2rem
						display flex
						.product-img
							position relative
							width 2rem
							height 2rem
							text-align center
							background #fff
							overflow hidden
							font-size 0
							img
								width 100%
						.product-img:before
							content: ""
							pointer-events: none
							box-sizing: border-box
							position: absolute
							width: 200%
							height: 200%
							left: 0
							top: 0
							border-radius: 0
							border: 1px solid #e5e5e5
							-webkit-transform: scale(.5)
							transform: scale(.5)
							transform-origin: 0 0
						.product-desc
							position relative
							width 4.5rem
							margin .32rem .16rem
							text-align: left
							.product-price
								color #ff6700
								.price
									font-size 0.48rem
								.originally
									color rgba(0, 0, 0, .54)
									font-size .24rem
									text-decoration line-through
									margin-left 0.1rem
								.originally:before
									content "￥"
									font-size .18rem
							.product-price:before
								content "￥"
								font-size .34rem
							.productName /*产品名称和产品型号*/
								font-size .28rem
								color rgba(0, 0, 0, .87)
								line-height .4rem
								margin-top .5em
					.productDetailBox
						height 60%
						overflow-y auto
					.versionsTitle
						padding-top .32rem
						padding-bottom .16rem
						line-height .24rem
						font-size .26rem
						color: rgba(0, 0, 0, .87)
					.versions /*商品的各种版本*/
						display flex
						flex-direction column
						li:before /*边框*/
							content ""
							display block
							border 0.02rem dashed rgba(0, 0, 0, .15)
							border-radius 2px
							width: 200%
							height: 200%
							position: absolute
							left: 0
							top: 0
							transform-origin: 0 0
							-webkit-transform: scale(.5)
							transform: scale(.5)
						.activate:before
							border-color #ff6700
						.activate
							color #ff6700
						li /*版本框*/
							width 100%
							padding .2rem
							margin 0.1rem 0
							position: relative
							border: 1px solid transparent
							overflow visible
							display flex
							justify-content space-between
							.versionsPrice:after
								content "元"
					.colorTitle
						padding-top .32rem
						padding-bottom .16rem
						line-height .24rem
						font-size .26rem
						color: rgba(0, 0, 0, .87)
					.colorBox /*可以选择的颜色*/
						width 100%
						display flex
						flex-wrap wrap
						padding-bottom .32rem
						.productColor /*颜色框*/
							height .72rem
							line-height .72rem
							min-width 1.45rem
							box-sizing border-box
							padding 0 .08rem
							text-align center
							margin .16rem 0 0 .16rem
							overflow visible
							border 1px solid transparent
							position relative
						.productColor:before
							content ""
							display block
							border 0.02rem dashed rgba(0, 0, 0, .15)
							border-radius 2px
							width: 200%
							height: 200%
							position: absolute
							left: 0
							top: 0
							transform-origin: 0 0
							-webkit-transform: scale(.5)
							transform: scale(.5)
						.productColorActivate
							color #ff6700
						.productColorActivate:before
							border-color #ff6700
				.addCart
					position fixed
					bottom 0
					left 0
					right 0
					background #fff
					height 1.2rem
					padding .2rem .3rem
					opacity 0
					transition all .5s
					.addButton
						height .64rem
						line-height .64rem
						border-radius .4rem
						background #ff6700
						color #fff
						display block
						text-align center
						width 100%
						font-size .28rem
</style>